<template>
  <div>
    <warning-bar title="注：右上角头像下拉可切换角色" />
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button size="small" type="primary" icon="plus" @click="addUser"
          >新增用户</el-button
        >
      </div>
      <el-table :data="tableData" row-key="ID">
        <el-table-column align="left" label="头像" min-width="75">
          <template #default="scope">
            <CustomPic style="margin-top: 8px" :pic-src="scope.row.headerImg" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="ID" min-width="50" prop="ID" />
        <el-table-column
          align="left"
          label="用户名"
          min-width="150"
          prop="userName"
        />
        <el-table-column
          align="left"
          label="昵称"
          min-width="150"
          prop="nickName"
        />
        <el-table-column
          align="left"
          label="手机号"
          min-width="180"
          prop="phone"
        />
        <el-table-column
          align="left"
          label="邮箱"
          min-width="180"
          prop="email"
        />
        <el-table-column align="left" label="用户角色" min-width="200">
          <template #default="scope">
            <el-cascader
              v-model="scope.row.authorityIds"
              :options="authOptions"
              :show-all-levels="false"
              collapse-tags
              :props="{
                multiple: true,
                checkStrictly: true,
                label: 'authorityName',
                value: 'authorityId',
                disabled: 'disabled',
                emitPath: false,
              }"
              :clearable="false"
              @visible-change="
                (flag) => {
                  changeAuthority(scope.row, flag);
                }
              "
              @remove-tag="
                () => {
                  changeAuthority(scope.row, false);
                }
              "
            />
          </template>
        </el-table-column>

        <el-table-column align="left" label="用户项目" min-width="150">
          <template #default="scope">
            <el-cascader
              v-model="scope.row.projectIds"
              :clearable="false"
              :options="projectOptions"
              :props="{
                multiple: true,
                checkStrictly: true,
                label: 'projectName',
                value: 'projectId',
                disabled: 'disabled',
                emitPath: false,
              }"
              :show-all-levels="false"
              collapse-tags
              @visible-change="
                (flag) => {
                  changeProject(scope.row, flag);
                }
              "
              @remove-tag="
                () => {
                  changeProject(scope.row, false);
                }
              "
            />
          </template>
        </el-table-column>

        <el-table-column align="left" label="启用" min-width="150">
          <template #default="scope">
            <el-switch
              v-model="scope.row.enable"
              inline-prompt
              :active-value="1"
              :inactive-value="2"
              @change="
                () => {
                  switchEnable(scope.row);
                }
              "
            />
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="250" fixed="right">
          <template #default="scope">
            <el-popover v-model="scope.row.visible" placement="top" width="160">
              <p>确定要删除此用户吗</p>
              <div style="text-align: right; margin-top: 8px">
                <el-button
                  size="small"
                  type="primary"
                  link
                  @click="scope.row.visible = false"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  @click="deleteUserFunc(scope.row)"
                  >确定</el-button
                >
              </div>
              <template #reference>
                <el-button type="primary" link icon="delete" size="small"
                  >删除</el-button
                >
              </template>
            </el-popover>
            <el-button
              type="primary"
              link
              icon="edit"
              size="small"
              @click="openEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="primary"
              link
              icon="magic-stick"
              size="small"
              @click="resetPasswordFunc(scope.row)"
              >重置密码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="addUserDialog"
      custom-class="user-dialog"
      title="用户"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <div style="height: 60vh; overflow: auto; padding: 0 12px">
        <el-form
          ref="userForm"
          :rules="rules"
          :model="userInfo"
          label-width="80px"
        >
          <el-form-item
            v-if="dialogFlag === 'add'"
            label="用户名"
            prop="userName"
          >
            <el-input v-model="userInfo.userName" />
          </el-form-item>
          <el-form-item
            v-if="dialogFlag === 'add'"
            label="密码"
            prop="password"
          >
            <el-input v-model="userInfo.password" />
          </el-form-item>
          <el-form-item label="昵称" prop="nickName">
            <el-input v-model="userInfo.nickName" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="userInfo.phone" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userInfo.email" />
          </el-form-item>
          <el-form-item label="用户角色" prop="authorityId">
            <el-cascader
              v-model="userInfo.authorityIds"
              style="width: 100%"
              :options="authOptions"
              :show-all-levels="false"
              :props="{
                multiple: true,
                checkStrictly: true,
                label: 'authorityName',
                value: 'authorityId',
                disabled: 'disabled',
                emitPath: false,
              }"
              :clearable="false"
            />
          </el-form-item>

          <!--          <el-form-item label="用户项目" prop="projectId">-->
          <!--            <el-cascader-->
          <!--              v-model="userInfo.projectIds"-->
          <!--              :clearable="false"-->
          <!--              :options="projectOptions"-->
          <!--              :props="{-->
          <!--                multiple: true,-->
          <!--                checkStrictly: true,-->
          <!--                label: 'projectName',-->
          <!--                value: 'projectId',-->
          <!--                disabled: 'disabled',-->
          <!--                emitPath: false,-->
          <!--              }"-->
          <!--              :show-all-levels="false"-->
          <!--              style="width: 100%"-->
          <!--            />-->
          <!--          </el-form-item>-->

          <el-form-item label="启用" prop="disabled">
            <el-switch
              v-model="userInfo.enable"
              inline-prompt
              :active-value="1"
              :inactive-value="2"
            />
          </el-form-item>
          <el-form-item label="头像" label-width="80px">
            <div style="display: inline-block" @click="openHeaderChange">
              <img
                v-if="userInfo.headerImg"
                class="header-img-box"
                :src="
                  userInfo.headerImg &&
                  userInfo.headerImg.slice(0, 4) !== 'http'
                    ? path + userInfo.headerImg
                    : userInfo.headerImg
                "
              />
              <div v-else class="header-img-box">从媒体库选择</div>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="closeAddUserDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="enterAddUserDialog"
            >确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
    <ChooseImg ref="chooseImg" :target="userInfo" :target-key="`headerImg`" />
  </div>
</template>

<script>
export default {
  name: "User",
};
</script>

<script setup>
import {
  getUserList,
  setUserAuthorities,
  setUserProjects,
  register,
  deleteUser,
} from "@/api/user";

import { getAuthorityList, getProjectList } from "@/api/authority";
import CustomPic from "@/components/customPic/index.vue";
import ChooseImg from "@/components/chooseImg/index.vue";
import WarningBar from "@/components/warningBar/warningBar.vue";
import { setUserInfo, resetPassword } from "@/api/user.js";

import { nextTick, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const path = ref(import.meta.env.VITE_BASE_API + "/");
// 初始化相关
const setAuthorityOptions = (AuthorityData, optionsData) => {
  AuthorityData &&
    AuthorityData.forEach((item) => {
      if (item.children && item.children.length) {
        const option = {
          authorityId: item.authorityId,
          authorityName: item.authorityName,
          children: [],
        };
        setAuthorityOptions(item.children, option.children);
        optionsData.push(option);
      } else {
        const option = {
          authorityId: item.authorityId,
          authorityName: item.authorityName,
        };
        optionsData.push(option);
      }
    });
};

const setProjectOptions = (ProjectData, optionsData) => {
  ProjectData &&
    ProjectData.forEach((item) => {
      const option = {
        projectId: item.ID,
        projectName: item.name,
      };
      optionsData.push(option);
    });
};

const page = ref(1);
const total = ref(0);
const pageSize = ref(10);
const tableData = ref([]);
// 分页
const handleSizeChange = (val) => {
  pageSize.value = val;
  getTableData();
};

const handleCurrentChange = (val) => {
  page.value = val;
  getTableData();
};

// 查询
const getTableData = async () => {
  const table = await getUserList({
    page: page.value,
    pageSize: pageSize.value,
  });
  if (table.code === 0) {
    tableData.value = table.data.list;
    total.value = table.data.total;
    page.value = table.data.page;
    pageSize.value = table.data.pageSize;
  }
};

watch(
  () => tableData.value,
  () => {
    setAuthorityIds();
    setProjectIds();
  }
);

const initPage = async () => {
  getTableData();
  const res = await getAuthorityList({ page: 1, pageSize: 999 });
  setOptions(res.data.list);
  const res1 = await getProjectList({ page: 1, pageSize: 999 });
  setOptionsProject(res1.data.list);
};

initPage();

const resetPasswordFunc = (row) => {
  ElMessageBox.confirm("是否将此用户密码重置为123456?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await resetPassword({
      ID: row.ID,
    });
    if (res.code === 0) {
      ElMessage({
        type: "success",
        message: res.msg,
      });
    } else {
      ElMessage({
        type: "error",
        message: res.msg,
      });
    }
  });
};
const setAuthorityIds = () => {
  tableData.value &&
    tableData.value.forEach((user) => {
      const authorityIds =
        user.authorities &&
        user.authorities.map((i) => {
          return i.authorityId;
        });
      user.authorityIds = authorityIds;
    });
};

const setProjectIds = () => {
  tableData.value &&
    tableData.value.forEach((user) => {
      const projectIds =
        user.projects &&
        user.projects.map((i) => {
          return i.ID;
        });
      user.projectIds = projectIds;
    });
};

const chooseImg = ref(null);
const openHeaderChange = () => {
  chooseImg.value.open();
};

const authOptions = ref([]);
const setOptions = (authData) => {
  authOptions.value = [];
  setAuthorityOptions(authData, authOptions.value);
};

const projectOptions = ref([]);
const setOptionsProject = (projectData) => {
  projectOptions.value = [];
  setProjectOptions(projectData, projectOptions.value);
};

const deleteUserFunc = async (row) => {
  const res = await deleteUser({ id: row.ID });
  if (res.code === 0) {
    ElMessage.success("删除成功");
    row.visible = false;
    await getTableData();
  }
};

// 弹窗相关
const userInfo = ref({
  username: "",
  password: "",
  nickName: "",
  headerImg: "",
  authorityId: "",
  authorityIds: [],
  enable: 1,
  projectId: "",
  projectIds: [],
});

const rules = ref({
  userName: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 5, message: "最低5位字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入用户密码", trigger: "blur" },
    { min: 6, message: "最低6位字符", trigger: "blur" },
  ],
  nickName: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
  authorityId: [{ required: true, message: "请选择用户角色", trigger: "blur" }],
  projectId: [{ required: true, message: "请选择用户项目", trigger: "blur" }],
});
const userForm = ref(null);
const enterAddUserDialog = async () => {
  userInfo.value.authorityId = userInfo.value.authorityIds[0];
  userInfo.value.projectId = userInfo.value.projectIds[0];
  userForm.value.validate(async (valid) => {
    if (valid) {
      const req = {
        ...userInfo.value,
      };
      if (dialogFlag.value === "add") {
        const res = await register(req);
        if (res.code === 0) {
          ElMessage({ type: "success", message: "创建成功" });
          await getTableData();
          closeAddUserDialog();
        }
      }
      if (dialogFlag.value === "edit") {
        const res = await setUserInfo(req);
        if (res.code === 0) {
          ElMessage({ type: "success", message: "编辑成功" });
          await getTableData();
          closeAddUserDialog();
        }
      }
    }
  });
};

const addUserDialog = ref(false);
const closeAddUserDialog = () => {
  userForm.value.resetFields();
  userInfo.value.headerImg = "";
  userInfo.value.authorityIds = [];
  userInfo.value.projectId = "";
  userInfo.value.projectIds = [];
  addUserDialog.value = false;
};

const dialogFlag = ref("add");

const addUser = () => {
  dialogFlag.value = "add";
  addUserDialog.value = true;
};
const changeAuthority = async (row, flag) => {
  if (flag) {
    return;
  }

  await nextTick();
  const res = await setUserAuthorities({
    ID: row.ID,
    authorityIds: row.authorityIds,
  });
  if (res.code === 0) {
    ElMessage({ type: "success", message: "角色设置成功" });
  }
};

const openEdit = (row) => {
  dialogFlag.value = "edit";
  userInfo.value = JSON.parse(JSON.stringify(row));
  addUserDialog.value = true;
};

const switchEnable = async (row) => {
  userInfo.value = JSON.parse(JSON.stringify(row));
  await nextTick();
  const req = {
    ...userInfo.value,
  };
  const res = await setUserInfo(req);
  if (res.code === 0) {
    ElMessage({
      type: "success",
      message: `${req.enable === 2 ? "禁用" : "启用"}成功`,
    });
    await getTableData();
    userInfo.value.headerImg = "";
    userInfo.value.authorityIds = [];
  }
};

const changeProject = async (row, flag) => {
  if (flag) {
    return;
  }

  await nextTick();
  const res = await setUserProjects({
    ID: row.ID,
    projectIds: row.projectIds,
  });
  if (res.code === 0) {
    ElMessage({ type: "success", message: "角色设置成功" });
  }
};
</script>

<style lang="scss">
.user-dialog {
  .header-img-box {
    width: 200px;
    height: 200px;
    border: 1px dashed #ccc;
    border-radius: 20px;
    text-align: center;
    line-height: 200px;
    cursor: pointer;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.nickName {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pointer {
  cursor: pointer;
  font-size: 16px;
  margin-left: 2px;
}
</style>
